<template>
  <Header></Header>
  <div class="box2 register-content">
    <div style="width: 100px; height: 20px">
      <h1>微课堂</h1>
    </div>
    <div>
      <input
        v-model.trim="username"
        name="username"
        placeholder="请输入用户名"
      />
    </div>
    <div>
      <input
        v-model.trim="password"
        name="password"
        type="password"
        placeholder="请输入密码"
      />
    </div>
    <div>
      <input
        v-model.trim="email"
        name="email"
        type="email"
        placeholder="请输入邮箱"
      />
    </div>
    <div>
      <input
        v-model.trim="phone"
        name="phone"
        type="tel"
        maxlength="11"
        oninput="value=value.replace(/[^\d]/g, '')"
        placeholder="请输入手机号"
      />
    </div>
    <div class="register-yzm">
      <div>
        <input
          v-model.trim="code"
          name="code"
          style="font-size: 15px; width: 150px; padding-left: 15px"
          placeholder="请输入验证码"
          maxlength="6"
        />
      </div>

      <div>
        <button
          v-if="phone.length == 11"
          class="get_verification register-button login-sms-send clickable disable"
          @click="getVerifyCode()"
          disabled
        >
          获取验证码
        </button>
      </div>
    </div>
    <div style="display: flex; width: 400px; justify-content: space-evenly">
      <div>
        <button
          @click.prevent="handlefinish"
          class="register-button login-sms-send clickable disable"
        >
          注 册
        </button>
      </div>
      <div>
        <button
          @click="toLogin"
          class="register-button login-sms-send clickable disable"
        >
          返 回
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name: "registerTest",
  components: {
    Header,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      username:"",
      password: "",
      email: "",
      phone: "",
      code: "",
      count: 60,
    };
  },
  methods: {
    // 回登录界面
    toLogin() {
      this.$router.push({ path: "/login" });
    },
    //实现注册
    async registerHandle(){
      let data = await this.$api.checkCode(this.phone, this.code);
      if(parseInt(data.code) !== 0 ){
        window.alert("验证码不正确");
        return
      }
      // 完成注册
      data = await this.$api.personal.register({
        username: this.username,
        password: this.password,
        email: this.email,
        phone: this.phone
      });
      if (parseInt(data.code) !== 0 ){
        window.alert("网络繁忙,请稍后再试");
        return;
      }
      window.alert("注册成功" ,{
        handled: () => {
          this.$router.push("/login");
        }
      });

    },

    //点击完成按钮触发handlefinish
    handlefinish: function () {
      if (localStorage["user"] === this.username) {
        alert("用户名已存在"); //如果用户名已存在则无法注册
      } else if (this.username === "") {
        alert("用户名不能为空");
      } else {
        //将新用户信息存储到localStorage
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
        localStorage.setItem("email", this.email);
        localStorage.setItem("phone", this.phone);
        localStorage.setItem("code", this.code);
        localStorage.setItem("s", "false");
        alert("注册成功");
        this.$router.replace("/login"); //完成注册后跳转至登录页面
      }
    },
    // 点击按钮倒计时
    getVerifyCode() {
      let setTime = setInterval(() => {
        this.count--;
        if (this.count === 0) {
          this.count = 60;
          clearInterval(setTime);
        }
      }, 1000);
    },
  },
};
</script>
<style scoped></style>
